import React, { Component } from 'react'
import axios from '../utils/request'
import '../App.css'
// import {
//     LeftOutlined
// } from '@ant-design/icons';
import { Comment, Avatar, Form, Button, List, Input } from 'antd';
import moment from 'moment';

const { TextArea } = Input;

const CommentList = ({ comments }) => (
    <List
        dataSource={comments}
        header={`${comments.length} ${comments.length > 1 ? '回复' : '评论'}`}
        itemLayout="horizontal"
        renderItem={props => <Comment {...props} />}
    />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
    <>
        <Form.Item>
            <TextArea rows={4} onChange={onChange} value={value} />
        </Form.Item>
        <Form.Item>
            <Button htmlType="submit" loading={submitting} onClick={onSubmit} type="primary">
                发送
      </Button>
        </Form.Item>
    </>
);

export default class Detail_Chat extends Component {
    state = {
        info: {},
        comments: [],
        submitting: false,
        value: '',
    }
    componentDidMount() {
        this.detail()
    }
    detail() {
        axios({
            url: "/detail",
            method: "post",
            data: {
                id: this.props.match.params.id
            }
        }).then(res => {
            this.setState({
                info: res.data.data
            })
        })
    }

    handleSubmit = () => {
        if (!this.state.value) {
            return;
        }

        this.setState({
            submitting: true,
        });

        setTimeout(() => {
            this.setState({
                submitting: false,
                value: '',
                comments: [
                    ...this.state.comments,
                    {
                        author: 'Han Solo',
                        avatar: 'https://joeschmoe.io/api/v1/random',
                        content: <p>{this.state.value}</p>,
                        datetime: moment().fromNow(),
                    },
                ],
            });
        }, 1000);
    };

    handleChange = e => {
        this.setState({
            value: e.target.value,
        });
    };
    goback() {
        this.props.history.go(-1);
    }
    touch() {
        this.props.history.push('/chat')
    }
    render() {
        const { info, comments, submitting, value } = this.state
        return (
            <div className='detail_chat'>
                <div className='detailchat_header'>
                    <li><svg t="1635382715649" onClick={() => this.goback()} className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3311" width="200" height="200"><path d="M624.788992 204.047974 585.205965 164.464026 219.560038 530.185011 585.205965 895.864013 624.788992 856.280986 298.663014 530.16105Z" p-id="3312" data-spm-anchor-id="a313x.7781069.0.i2" className="selected" fill="#10d503"></path></svg></li>
                    <li>科普话题</li>
                    <li><svg t="1635382659909" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2462" width="200" height="200"><path d="M972.8 549.9136v294.7584A128.0768 128.0768 0 0 1 844.8 972.8H179.2a128 128 0 0 1-128-128V179.2c0-70.7328 57.1904-128 127.872-128h202.3168a25.6 25.6 0 0 0 0-51.2H179.072A179.072 179.072 0 0 0 0 179.2v665.6a179.2 179.2 0 0 0 179.2 179.2h665.6c98.944 0 179.2-80.2816 179.2-179.328V549.9136a25.6 25.6 0 0 0-51.2 0z" p-id="2463" fill="#8a8a8a"></path><path d="M960 128c-353.4592 0-640 286.5408-640 640a25.6 25.6 0 0 0 51.2 0c0-325.1968 263.6032-588.8 588.8-588.8a25.6 25.6 0 0 0 0-51.2z" p-id="2464" fill="#8a8a8a"></path><path d="M720.1024 62.1568l256 102.4a25.6 25.6 0 0 0 18.9952-47.5136l-256-102.4a25.6 25.6 0 0 0-18.9952 47.5136z" p-id="2465" fill="#8a8a8a"></path><path d="M808.8064 348.4672l194.6368-189.312a25.6 25.6 0 1 0-35.6864-36.7104L773.12 311.7568a25.6 25.6 0 1 0 35.6864 36.7104z" p-id="2466" fill="#8a8a8a"></path></svg></li>
                </div>
                <div className='detailchat_main'>
                    <div className='detailchat_main_one'>
                        <h5>【心灵悄悄话】{info.sold}?</h5>
                    </div>
                    <div className='detailchat_main_img'>
                        <li>&emsp;<img src={info.img1}></img>&emsp;<span>{info.name}</span>&emsp;<span>{info.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&nbsp;<span>+关注</span></li>
                        <li>&emsp;<span>{info.solp}</span>&emsp;<span>{info.slie}</span>&emsp;<span>{info.boy}</span></li>
                    </div>
                    <div className='detailchat_main_two'>
                        <li>{info.cope}{info.cope}</li>
                        <li>阅读{info.num}</li>
                        <li><span><svg t="1635386998917" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4447" width="200" height="200"><path d="M64 483.04V872c0 37.216 30.144 67.36 67.36 67.36H192V416.32l-60.64-0.64A67.36 67.36 0 0 0 64 483.04zM857.28 344.992l-267.808 1.696c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-68.832-155.488-137.568-145.504-60.608 8.8-67.264 61.184-67.264 126.816v59.264c0 76.064-63.84 140.864-137.856 148L256 416.96v522.4h527.552a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824z" p-id="4448" fill="#bfbfbf"></path></svg>&nbsp;{info.count}</span>
                            <span><svg t="1635387392275" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27150" width="200" height="200"><path d="M841.74336 66.56H178.10944c-45.62944 0-82.95424 37.33504-82.95424 82.95424v759.04c0 45.6192 29.03552 62.208 70.50752 37.3248l277.89824-182.5024c37.3248-24.8832 99.54304-24.8832 136.86784 0l277.89824 182.5024c37.33504 24.8832 70.50752 8.2944 70.50752-37.3248V149.51424c-4.13696-45.6192-41.46688-82.95424-87.0912-82.95424zM721.4592 398.38208L659.24608 460.5952c-16.5888 16.5888-24.87808 45.62432-20.736 70.51264l16.5888 87.10144c4.1472 20.74112-8.29952 33.1776-29.04064 20.74112l-74.6496-41.47712c-20.75136-12.44672-53.92896-12.44672-74.66496 0l-74.65472 41.47712c-20.74624 12.4416-33.18272 0-29.03552-20.74112l16.5888-87.10144c4.1472-20.74624-8.29952-53.92384-20.74624-70.51264L298.3936 398.38208c-16.59392-16.5888-12.44672-33.18272 12.44672-33.18272l87.10144-12.44672c20.74624-4.15232 49.77152-20.74112 58.07104-41.47712l37.32992-78.81216c8.29952-20.74112 24.89344-20.74112 37.33504 0l37.32992 78.81216c8.28928 20.74112 37.32992 41.47712 58.0608 41.47712l87.11168 12.44672c20.73088 4.1472 24.87296 16.59392 8.27904 33.18272z" fill="#FD683C" p-id="27151" data-spm-anchor-id="a313x.7781069.0.i27" className="selected"></path></svg>&nbsp;送心意</span>
                            <span onClick={() => this.touch()}><svg t="1635387593715" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34290" width="200" height="200"><path d="M801.083489 440.160835c0-174.570921-168.133302-316.608891-374.807385-316.608891-206.680223 0-374.813524 142.038994-374.813524 316.608891 0 77.026304 33.057907 151.250796 92.254124 208.022801 7.339152 11.43954 8.308223 73.081459 2.049682 131.902122l-5.047969 47.361681 39.84652-26.071795c45.51052-29.798676 103.803157-61.709457 119.846552-62.833047 40.286542 12.099572 82.623789 18.247596 125.863592 18.247596C632.950188 756.791216 801.083489 614.751199 801.083489 440.160835zM246.681774 478.177684c-23.803125 0.110517-43.196825-19.130709-43.284829-42.931788-0.132006-23.803125 19.107173-43.195801 42.930765-43.328831 23.7581-0.109494 43.196825 19.152199 43.284829 42.931788C289.723056 458.694957 270.482853 478.067166 246.681774 478.177684zM427.399695 478.177684c-23.802102 0.110517-43.173289-19.130709-43.284829-42.931788-0.109494-23.803125 19.130709-43.195801 42.931788-43.328831 23.803125-0.109494 43.196825 19.152199 43.283806 42.931788C470.443024 458.694957 451.223287 478.067166 427.399695 478.177684zM598.922187 478.177684c-23.803125 0.110517-43.174312-19.130709-43.284829-42.931788-0.109494-23.803125 19.129686-43.195801 42.931788-43.328831 23.801079-0.109494 43.195801 19.152199 43.284829 42.931788C641.964492 458.694957 622.745778 478.067166 598.922187 478.177684z" p-id="34291" fill="#42E26F"></path><path d="M964.699917 516.855588c0-88.551802-44.2539-173.621293-121.434723-233.413074-9.871835-7.603165-24.022113-5.841032-31.66928 4.03285-2.137687 2.755764-3.349281 5.841032-4.03285 9.035794 25.433252 45.621037 40.066531 96.354512 40.066531 150.041248 0 171.261549-144.707776 314.447668-336.202135 347.044064-2.049682 2.866281-3.65832 6.061043-4.208858 9.785877-1.763157 12.342096 6.78759 23.778566 19.128663 25.563212 63.274092 9.103332 129.301901 4.320399 189.380208-13.729699 16.044418 1.124614 74.358545 33.036417 119.869065 62.833047l39.869033 26.093285-5.069459-47.384194c-6.281053-58.799174-5.333472-120.420627 1.234107-130.933051C931.619498 668.10843 964.677405 593.880869 964.699917 516.855588z" p-id="34292" fill="#42E26F"></path></svg>&nbsp;立即咨询</span>
                        </li>
                    </div>
                    <div className='detailchat_main_three'>
                        <li>声明:任何有关疾病的建议都不能代替执业医师建议版权问题请点击查看&emsp;<a>说明</a></li>
                    </div>
                    <div className='detailchat_main-four'>
                        <h3>评论</h3>
                        <div>
                            {comments.length > 0 && <CommentList comments={comments} />}
                            <Comment
                                avatar={<Avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />}
                                content={
                                    <Editor
                                        onChange={this.handleChange}
                                        onSubmit={this.handleSubmit}
                                        submitting={submitting}
                                        value={value}
                                    />
                                }
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
